<!--
 <%= htmlWebpackPlugin.options.info %>
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.24.15/antd.min.css">
    <link rel="stylesheet" type="text/css" href="./widget-main.css">
    <title> 座席组件 Demo </title>
    <script src="../js/config.js"></script>
    <script src="../js/adapter.js"></script>
    <script src="../js/socket.io.js"></script>
    <script src="../js/ivcs.js"></script>
    <script src="../js/iconfont.js"></script>
    <script src="../js/ZcoIM.js"></script>
    <script src="../js/dstpSecurityPage-1.1.3.umd.js"></script>
    <script src="./index.js"></script>
      <!-- Include Vue.js library -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- Import Element UI CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- Import Element UI JS -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        #app {
            width: 100%;
            height: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        .widget-init-section {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .login-form-wrapper {
            width: 400px;
            padding: 20px;
            border: 1px solid #e8e8e8;
            border-radius: 5px;
            background-color: #fff;
            box-sizing: border-box;
        }
        .options-wrapper {
            width: 600px;
            height: 100%;
            overflow-y: auto;
            padding: 20px;
            border: 1px solid #e8e8e8;
            border-radius: 5px;
            background-color: #fff;
            box-sizing: border-box;
        }
        #agent-widget-root {
            width: 100%;
            height: 100%;
        }
    </style>

<body>
    <div id="app">
        <!-- login section -->
        <div id="agent-widget-root"></div>
        <div class="widget-init-section" id="widget-init-section">
            <!-- options section -->
            <div class="options-wrapper">
                <el-form ref="form" :model="options" label-width="150px">
                    <el-form-item label="设备设置" prop="deviceConfigHidden">
                        <el-checkbox v-model="options.deviceConfigHidden">隐藏设备设置菜单</el-checkbox>
                    </el-form-item>
                    <el-form-item label="虚拟背景" prop="virtualBackgroundConfigHidden">
                        <el-checkbox v-model="options.virtualBackgroundConfigHidden">隐藏虚拟背景Tab</el-checkbox>
                    </el-form-item>
                    <el-form-item label="水印" prop="watermarkConfigHidden">
                        <el-checkbox v-model="options.watermarkConfigHidden">隐藏水印Tab</el-checkbox>
                    </el-form-item>
                    <el-form-item label="多语言" prop="languageConfigHidden">
                        <el-checkbox v-model="options.languageConfigHidden">隐藏多语言菜单</el-checkbox>
                    </el-form-item>
                    <el-form-item label="接听设置" prop="acceptCallConfigHidden">
                        <el-checkbox v-model="options.acceptCallConfigHidden">隐藏接听设置菜单</el-checkbox>
                    </el-form-item>
                    <el-form-item label="悬浮框提醒" prop="floatAlertConfigHidden">
                        <el-checkbox v-model="options.floatAlertConfigHidden">隐藏悬浮框提醒</el-checkbox>
                    </el-form-item>
                    <el-form-item label="管理菜单" prop="managementMenuHidden">
                        <el-checkbox v-model="options.managementMenuHidden">隐藏管理菜单</el-checkbox>
                    </el-form-item>
                    <el-form-item label="座席管理菜单" prop="agentManagemenMenutHidden">
                        <el-checkbox v-model="options.agentManagemenMenutHidden">隐藏座席管理菜单</el-checkbox>
                    </el-form-item>
                    <el-form-item label="用户信息" prop="userInfoHidden">
                        <el-checkbox v-model="options.userInfoHidden">隐藏用户信息</el-checkbox>
                    </el-form-item>
                    <el-form-item label="聊天" prop="chatBoxHidden">
                        <el-checkbox v-model="options.chatBoxHidden">隐藏聊天</el-checkbox>
                    </el-form-item>
                    <el-form-item label="布局菜单" prop="layoutConfigHidden">
                        <el-checkbox v-model="options.layoutConfigHidden">隐藏布局菜单</el-checkbox>
                    </el-form-item>
                    <el-form-item label="业务操作" prop="bizPannelHidden">
                        <el-checkbox v-model="options.bizPannelHidden">隐藏业务操作</el-checkbox>
                    </el-form-item>
                    <el-form-item label="质检结果" prop="qualityTestingResultHidden">
                        <el-checkbox v-model="options.qualityTestingResultHidden">隐藏质检结果</el-checkbox>
                    </el-form-item>
                    <el-form-item label="排队数" prop="isCallProgressHidden">
                        <el-checkbox v-model="options.isCallProgressHidden">隐藏排队数</el-checkbox>
                    </el-form-item>
                    <el-form-item label="双录按钮" prop="isRecordHidden">
                        <el-checkbox v-model="options.isRecordHidden">隐藏双录按钮</el-checkbox>
                    </el-form-item>
                    <!-- 是否通知访客媒体升级 -->
                    <el-form-item label="通知访客媒体升级" prop="isNotifyCustomerMediaUpgrade">
                        <el-checkbox v-model="options.isNotifyCustomerMediaUpgrade">通知访客媒体升级</el-checkbox>
                    </el-form-item>
                    <!-- 视频进电隐藏语音和视频按钮 -->
                    <el-form-item label="进电按钮" prop="allowAudioAnswerToVideoCall">
                        <el-checkbox v-model="options.allowAudioAnswerToVideoCall">视频进电隐藏语音和视频按钮</el-checkbox>
                    </el-form-item>
                    <!-- 隐藏工具菜单 ID -->
                    <el-form-item label="隐藏工具菜单" prop="ignoreTools">
                        <el-input v-model="options.ignoreTools"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="login-form-wrapper">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="登录地址" prop="loginUrl" required="true">
                        <el-input v-model="form.loginUrl"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名" prop="username" required="true">
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password" required="true">
                        <el-input type="password" v-model="form.password"></el-input>
                    </el-form-item>
                    <el-form-item label="机构" prop="org" required="true">
                        <el-input v-model="form.org"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="login">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

    </div>
    <script>
        // Create a Vue instance
        var app = new Vue({
          el: '#app', // Mount Vue instance to the element with id="app"
          data: {
            form: {
                loginUrl: 'https://ivcs-test-k8s-azure.zealcomm.cn',
                username: 'michael',
                password: '111111',
                org: '1'
            },
            options: {
                deviceConfigHidden: false, // 是否隐藏设备设置(音视频设备+虚拟背景+水印)
                virtualBackgroundConfigHidden: false, // 是否隐藏虚拟背景
                watermarkConfigHidden: false, // 是否隐藏水印
                languageConfigHidden: false, // 是否隐藏多语言
                acceptCallConfigHidden: false, // 是否隐藏接听设置
                floatAlertConfigHidden: false, // 是否隐藏悬浮框提醒
                managementMenuHidden: false, // 是否隐藏管理菜单
                agentManagemenMenutHidden: false, // 是否隐藏座席管理菜单
                userInfoHidden: false, // 是否隐藏用户信息
                chatBoxHidden: false, // 是否隐藏聊天
                layoutConfigHidden: false, // 是否隐藏布局菜单
                bizPannelHidden: false, // 是否隐藏业务操作
                qualityTestingResultHidden: false, // 是否隐藏质检结果
                // isImagePreviewHidden: true, // 是否开启图片预览
                isCallProgressHidden: false, // 是否隐藏排队数
                ignoreTools: '', // 隐藏工具菜单 ID
                isRecordHidden: true, // 控制显示双录按钮(坐席开启录制/停止录制)
                isNotifyCustomerMediaUpgrade: false, // 是否通知访客媒体升级
                allowAudioAnswerToVideoCall: true, // true: 视频进电隐藏语音和视频按钮，false:视频进电只隐藏视频按钮
                headerMenus: [
                    { label: '通话服务', i18nKey: 'call-service', key: 'sessionService' },
                    { label: '在线坐席管理', i18nKey: 'online-agent-management', key: 'agentManagement' }
                ], // 头部 Tab 标签
            }
          },
          mounted: function() {
            const widget = document.getElementById('agent-widget-root');
            widget.style.display = 'none';
            this.init();
          },
          methods: {
            login: function() {
                console.log('login', this.form);
                // validate
                if (!this.form.loginUrl || !this.form.username || !this.form.password || !this.form.org) {
                    this.$message.error('请填写完整登录信息');
                    return;
                }
                AgentServer.Agent.setLoginData({ username: this.form.username, password: this.form.password, org: this.form.org });
                AgentServer.Agent.loginSystem();

            },
            init() {
                // 初始化参数
                const { configure } = AgentServer.Agent;
                configure.setServiceUrl(this.form.loginUrl);
                configure.setDefaultMediaOptions(defaultMediaOptions);
                configure.setCountlyParam({ appkey: '', host: '' });
                configure.setCustomerUrl(customerUrl);
                configure.setFormUrl(formUrl);
                configure.setResourceOriginUrlDomain(resourceOriginUrlDomain);
                configure.setResourceReplaceUrlDomain(resourceReplaceUrlDomain);
                configure.setUrlMapping(typeof urlMapping === 'undefined' ? {} : urlMapping);
                AgentServer.Agent.setLogLevel(logLevel);
                configure.setDefaultMediaOptions(defaultMediaOptions);
                configure.setMaxUploadFileSize(maxUploadFileSize);
                if (whiteboardInfo && whiteboardInfo.hostName && whiteboardInfo.whiteboardPath) {
                    configure.setWhiteBoardInfo(whiteboardInfo);
                } else {
                    configure.setWhiteBoardInfo({ hostName: loginUrl, whiteboardPath: '/static/whiteboard' });
                }
                // 初始化系统
                AgentServer.Agent.init(this.form.loginUrl, this.options);

                AgentServer.Agent.addEventListener(resp => {
                    if (resp.event === 'LOGIN') {
                        if (resp.data.code === 10000) {
                            const widget = document.getElementById('agent-widget-root');
                            widget.style.display = 'block';
                            const option = document.getElementById('widget-init-section');
                            option.style.display = 'none';
                            // 登录成功，创建视图
                            AgentServer.Agent.createView('agent-widget-root');
                            AgentServer.render();
                        } else {
                            AgentServer.destroy();
                        }
                    }
                })

            }
          }
        });
    </script>
</body>

</html>
